<!-- author wyq -->
<template>
  <a-row type="flex">
    <a-col :span="24">
      <div v-if="total >= 10" class="Pagenation">
        <div class="title">
          <div v-if="isArabic" class="Enlish">
            عرض {{ start }} ل {{ end }} ل {{ total }} صفوف
            <a-select :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" class="select" v-model:value="currentPageSize" @change="handleChangePageSize">
              <a-select-option v-for="(item, index) in opts" :value="item" :key="index">
                {{ item }}
              </a-select-option>
            </a-select> صفوف لكل صفحة
          </div>
          <div v-if="isEn" class="Enlish">
            Showing {{ start }} to {{ end }} of {{ total }} rows
            <a-select :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" class="select" v-model:value="currentPageSize" @change="handleChangePageSize">
              <a-select-option v-for="(item, index) in opts" :value="item" :key="index">
                {{ item }}
              </a-select-option>
            </a-select> rows per page
          </div>
          <div v-if="isCn" class="chinese">
            显示第 {{ start }} 到第 {{ end }} 条记录，总共 {{ total }} 条记录 每页显示
            <a-select :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" class="select" v-model:value="currentPageSize" @change="handleChangePageSize">
              <a-select-option v-for="(item, index) in opts" :value="item" :key="index">
                {{ item }}
              </a-select-option>
            </a-select>条记录
          </div>
        </div>
        <a-pagination v-model:current="pageNo" v-model:page-size="pageSize" :total="total" @change="handleChange">
          <template #itemRender="{ type, originalElement }">
            <a v-if="type === 'prev'">
              <a-button class="pre-btn" type="default">{{
                $t("prev")
              }}</a-button>
            </a>
            <a v-else-if="type === 'next'">
              <a-button class="next-btn" type="default">{{
                $t("next")
              }}</a-button>
            </a>
            <component :is="originalElement" v-else></component>
          </template>
        </a-pagination>

      </div>
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
import { computed, watch, defineEmits, ref } from 'vue';
import { useI18n } from "vue-i18n";
import { useLanguage } from "@/hooks/index"
const { isEn, isCn, isArabic } = useLanguage()
const { t: $t } = useI18n();
const props = defineProps({
  pages: {
    required: true,
    type: Object,
    default: () => { },
  },
  len: {
    required: true,
    type: Number,
    default: 0,
  },
  total: {
    required: true,
    type: Number,
    default: 10,
  },
  pageNos: {
    required: true,
    type: Number,
    default: 1,
  },
  currentPageSizes: {
    required: true,
    type: Number,
    default: 30,
  }
});
let pageSize = ref(props.pages.pageSize)
let pageNo = ref(props.pages.pageNo)
let total = ref(props.pages.totalCount)
const pageDatas: any = ref(
  props.pages
)
let currentPageSize: any = ref(30)
let opts = ref(["30", "60", "90", "120", "150"])
let start = computed(() => {
  if (props.pageNos == 1) return 1
  const page = props.pageNos - 1
  return (page * props.currentPageSizes) + 1
})
let end = computed(() => {
  return start.value + props.len - 1
})
const emit = defineEmits(['pager-change']);
watch(
  () => [props.pageNos, props.currentPageSizes],
  (newVal: any) => {
    pageNo.value = newVal[0];
    pageSize.value = newVal[1];

  },
  { immediate: true, deep: true }
);
watch(
  () => props.total,
  (newVal) => {
    total.value = newVal;
  },
  { immediate: true, deep: true }
);
watchEffect(() => {
  currentPageSize.value = props.currentPageSizes
})
const handleChangePageSize = () => {
  const page = { pageSize: Number(currentPageSize.value), pageNo: pageNo.value };
  pageDatas.value = page
  emit('pager-change', page);
}
const handleChange = (no, size) => {
  const page = { pageSize: size, pageNo: no };
  emit('pager-change', page);
}
</script>
<style lang="scss" scoped>
.Pagenation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .title {
    font-size: 12px;
    color: rgb(103, 106, 108);

    .select {
      background-color: #676a6c;
      border-radius: 4px;
      color: #fff;
    }
  }

  .ant-pagination {
    :deep(.ant-pagination-item) {
      background-color: #fff !important;
      border-radius: 2px !important;
      border: 1px solid hsl(0, 2%, 89%) !important;
    }

    :deep(.ant-pagination-item-active) {
      background-color: var(--bg-pagination) !important;
      border: none !important;
      color: #fff !important;
      border-color: transparent !important;

      a {
        color: #fff;
      }
    }
  }

}

:deep(.ant-pagination-options) {
  display: none;
}

:deep(.ant-btn) {
  border-radius: 0;
}

.pre-btn {
  font-size: 12px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.next-btn {
  font-size: 12px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

:deep(.ant-pagination-prev) {
  border-radius: 0;
  margin-inline-end: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

:deep(.ant-pagination-item) {
  border-radius: 0;
  border: 1px #eee solid;
  margin-inline-end: 0;
}

:deep(.ant-pagination-jump-next) {
  border-radius: 0;
  border: 1px #eee solid;
  margin-inline-end: 0;
}

:deep(.ant-select-single.ant-select-show-arrow .ant-select-selection-item) {
  color: #fff;
}

:deep(.ant-pagination-item-active) {
  background-color: #62b196;

  a {
    color: #fff;
  }
}

::v-deep {
  .ant-select .ant-select-arrow {
    color: #fff;
  }
}
</style>